<template>
<div>
  <div>
    <el-input
      size="small"
      class="addPosInput"
      placeholder="添加职位..."
      suffix-icon="el-icon-plus"
      v-model="pos.name"
    >
    </el-input>
    <el-button icon="el-icon-plus" size="small" type="primary" @click="addPos">添加</el-button>
    <el-button icon="el-icon-plus" size="small" type="danger" @click="deleteBatch" :disabled="!buttonShow">批量删除</el-button>
  </div>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>


      <el-table-column
        prop="name"
        label="职位"
        width="250%">
<!--        <template slot-scope="scope">{{ scope.row.name }}</template>-->
      </el-table-column>

      <el-table-column
        prop="createDate"
        label="更新日期"
        width="250%">
<!--        <template slot-scope="scope">{{ scope.row.createDate }}</template>-->
      </el-table-column>

      <el-table-column
        label="状态"
        width="250%"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag type="success">
            {{ scope.row.enabled === true ? '正常':'禁用' }}
          </el-tag>
       </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑职位" :visible="dialogFormVisible" append-to-body>
      <el-form :model="updateForm">
        <el-form-item label="职位名称" >
          <el-input v-model="updateForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <div>

  </div>
</div>
</template>

<script>
import posApi from '@/api/position'
export default {
  name: "PosMana",
  data(){
    return{
      pos:{
        name:'',
      },
      dialogFormVisible:false,
      tableData: [],
      multipleSelection: [],
      updateForm:{},
      buttonShow:false,
      selectIds:[],
    }
  },
  methods:{
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
      console.log(val.length);
      // 超过两条才显示批量删除按钮
      if (val.length !== 0) {
        this.buttonShow = true
      }else{
        this.buttonShow = false
      }
    },
    // 批量删除按钮
    deleteBatch(){
      // 将选择的id放入数组
      let ids = this.multipleSelection.map(function (item, index){
        return item.id;
      });
      console.log(ids);
      this.$confirm('此操作将永久删除'+ this.multipleSelection.length+'条职位信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送请求 批量删除
        posApi.updateBatchPos(ids).then(res => {
          if (res){
            // 更新数据
            this.getPostion();
          }
        })
      }).catch(() => {
        this.$refs.multipleTable.clearSelection(); // 清空选中状态
        this.$message({
          type: 'info',
          message: '已取消删除'
        });

      });

    },
    handleEdit(index, row) {
      console.log(index, row);
      // this.updateForm = row;
      // Object.assign(this.updateForm,row)
      // 解决赋值后 修改时 表格的数据跟着改动
      this.updateForm = Object.assign({}, this.updateForm, row)
      this.updateForm.createDate = '';
      this.dialogFormVisible = true;
    },
    confirmEdit(){
      console.log(this.updateForm)
      posApi.updatePosition(this.updateForm).then(res => {
        if (res) {
          console.log(res);
          this.dialogFormVisible = false;
          // 刷新数据
          this.getPostion()
        }
      })
    },
    handleDelete(index, row) {
      console.log(row);
      this.$confirm('此操作将永久删除['+row.name+']职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除操作
        posApi.deletePosition(row.id).then(res => {
          console.log(res);
          // 刷新数据
          this.getPostion()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    addPos(){
      if (this.pos.name !== ''){
        posApi.addPosition(this.pos).then(res => {
          console.log(res);
          if (res){
            // 刷新数据
            this.getPostion()
            this.pos.name = ''
          }

        }).catch(err => {})
      }else{
        this.$message({
            type: 'info',
            message: '职位名称不能为空',
          }
        )
      }

    },
    getPostion(){
      posApi.getAllPostions().then((res) => {
        console.log(res);
        if (res){
          this.tableData = res.data
        }
      })
    }
  },
  created() {
    this.getPostion()
  }
}
</script>

<style scoped>
  .addPosInput{
    width: 300px;
    margin-right: 8px;
    margin-bottom: 30px;
  }

</style>
